<template>
  <div class="full">
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">监控探头位置</div>
      </div>
    </div>
    <div class="flex-container-cyblr">
      <div class="table-list">
        <ul>
          <li
            v-for="(item, index) in items"
            :key="index"
            @click="selectItem(index)"
            class="img-table"
          >
            <div class="with">
              <div class="select-img" v-if="selectedIndex === index"></div>
            </div>
            <div
              class="list-img"
              :style="{
                'background-image':
                  selectedIndex === index
                    ? 'url(src/assets/摄像头.png)'
                    : 'url(src/assets/摄像头.png)',
              }"
            ></div>
            <span
              :style="{ color: selectedIndex === index ? '#1FACEB' : 'white' }"
              >{{ item }}</span
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// var chartDom = document.getElementById("main");postall
// var myChart = echarts.init(chartDom);
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
import axios from "axios";

export default {
  data() {
    return {
      items: [
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4",
        "Item 4",
        "Item 4",
        "Item 4",
        "Item 4",
        "Item 4",
        "Item 4",
        "Item 4",
      ], // 假设有这些数据
      selectedIndex: -1, // 用来记录选中的索引
    };
  },
  setup() {},
  mounted() {},
  emits: ["sendData"],
  methods: {
    selectItem(index) {
      this.selectedIndex = index; // 当点击某一行时，将该行的索引记录下来
      this.$emit("sendData", this.items[index]);
    },
  },
};
</script>
<style scoped>
.full {
  display: flex;
  flex-direction: column;
  width: 25rem;
  /* background-color: #e62f29; */
}
.container {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.full-secondtitle {
  display: flex;
  align-items: center;
  background-color: #ffffff70;
  padding: 0.3rem 1rem;
}
.full-secondtitle .h1 {
  line-height: 1;
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffffff;
}
.flex-container-cyblr {
  display: flex;
  flex-direction: column;
  height: 46.5rem;
  width: 25rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}
.select-img {
  width: 0.625rem;
  height: 0.625rem;
  background-image: url("../assets/选择箭头.png");
  /* background-size: 100% 100%; */
  background-size: cover;
  background-repeat: no-repeat;
}
.table-list {
  display: flex;
  flex-direction: row;
  width: 24rem;
}
.table-list ul {
  padding: 0;
}
.table-list li {
  padding: 0.5rem 0;
}
.with {
  width: 1rem;
}
.list-img {
  width: 2.1rem;
  height: 2.05rem;
  /* background-image: url("../assets/产业列表.png"); */
  /* background-size: 100% 100%; */
  background-size: cover;
  background-repeat: no-repeat;
}
.img-table {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.05);
}
.img-table span {
  font-size: 1.2;
  font-weight: 400;
  color: #ffffff;
  margin-left: 0.5rem;
  flex-grow: 1;
}
</style>